Vue组件中的自定义事件你了解多少

您所在的位置：网站首页 › jsx 自定义事件 › Vue组件中的自定义事件你了解多少

Vue组件中的自定义事件你了解多少

2022-06-02 20:35| 来源: 网络整理| 查看: 265

主要介绍组件的自定义事件的概念，使用等。何为组件自定义事件：组件自定义事件是一种组件间的通信方式，方向是子组件====父组件。使用场景：A是子组件，B是父组件，如果要把B的数据传给A，可以使用pro...

主要介绍组http://www.cppcns.com件的自定义事件的概念，使用等。

何为组件自定义事件：

组件自定义事件是一种组件间的通信方式，方向是子组件====>父组件。使用场景：A是子组件，B是父组件，如果要把B的数据传给A，可以使用props配置项，如果要把A的数据转给B，就要用到组件自定义事件或者使用props加回调函数也可实现。

先使用props加回调函数实现子组件传递数据给父组件。

在这里插入图片描述

main.js：

//引入vue依赖 import Vue from 'vue' //引入组件App import App from './App.vue' // 关闭生产提示 Vue.config.productionTip = false //创建一个vue实例 new Vue({ //这个目前还没学过，先知道他的作用是将app放入容器中。 render: h => h(App), //配置该vue实例管理id为app的容器 }).$mount('#app')

App.vue：

&http://www.cppcns.comlt;hr> App获取School子组件的学校名：{{schoolNameFromSchool}} // 原本的引入 // import school from "./School.vue" // import student from "./Student.vue" //修改后的 //引入school组件和student组件,涉及es模块化的语法 import school from "./components/School.vue" import student from "./components/Student.vue" export default { data() { return { schoolNameFromSchool:"" } }, components:{ //注册组件 school, student }, methods:{ //定义一个回调函数并传递给子组件School getSchoolNameFromSchoolVc(schoolName){ console.log("App获取School子组件的学校名：",schoolName); //赋值给schoolNameFromSchool this.schoolNameFromSchool = schoolName; } } }

schoo.vue：

学校：{{schoolName}} 地址：{{schoolAddress}} 传递学校名给App组件 //交互代码编写的地方，需要暴露出去给其他地方引入 //这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象， //并且引入默认暴露的组件引入语法比较简单。 export default { data() { return { schoolName:"尚硅谷", schoolAddress:"北京" } }, //接收回调函数 props:["getSchoolNameFromSchoolVc"], methods:{ sendSchoolNameToApp(){ //调用回调函数，并把学校名传递进去 this.getSchoolNameFromSchoolVc(this.schoolName) } } } /* 编写样式的地方 */ .orange{ background-color: orange; }

student.vue：

学生姓名：{{studentName}} 年龄：{{studentAge}} //交互代码编写的地方，需要暴露出去给其他地方引入 //这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象， //并且引入默认暴露的组件引入语法比较简单。 export default { data() { return { studentName:"张三", studentAge:18 } }, } /* 编写样式的地方 */ .orange{ background-color: gray; }

这种方式的流程：

1.在父组件(App)中定义一个回调方法并传递给子组件(School)。

在这里插入图片描述